<script lang="ts">
    import { onMount } from "svelte";
    import { useClassList } from "../utils/useClassList";
    import type { CompactProps } from "./Compact";

    const props: CompactProps = $props();
    const classList = $derived(useClassList(props, "cm-compact"));
    let wrap: HTMLDivElement;

    onMount(() => {
        resetClass();
    });

    const resetClass = () => {
        console.log(1);

        if (wrap) {
            const children = wrap.children;
            const length = children.length;
            for (let i = 0; i < length; i++) {
                const child = children[i];
                child.classList.remove("cm-compact-first-item");
                child.classList.remove("cm-compact-last-item");
                child.classList.remove("cm-compact-item");
                child.classList.add("cm-compact-item");
                if (i === 0) {
                    child.classList.add("cm-compact-first-item");
                }
                if (i === length - 1) {
                    child.classList.add("cm-compact-last-item");
                }
            }
        }
    };
</script>

<div {...props} class={classList} bind:this={wrap}>
    {@render props.children?.()}
</div>
